<extend name="work/base"/>
<block name="body">
    <script type="text/javascript" src="https://cdn.weibuyun.com/static/admin/js/echarts.min.js"></script>
    <div class="layui-row layui-col-space10">

        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">项目信息</div>
                <div class="layui-card-body">
                    <div id="treeproject" style="height:300px;overflow-y :auto;"></div>
                </div>
            </div>

        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header"></div>
                <div class="layui-card-body">
                    <div id="projectbar" style="height:300px;"></div>
                </div>
            </div>

        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header"></div>
                <div class="layui-card-body">
                    <div id="projectradar" style="height:300px;"></div>
                </div>
            </div>

        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header"><i class="layui-icon layui-icon-face-smile-fine" style="font-size: 20px; color: #01AAED;"></i>服务信息</div>
                <div class="layui-card-body">
                    <blockquote class="layui-elem-quote layui-quote-nm">{:config('param.work_time')}</blockquote>
                    <blockquote class="layui-elem-quote layui-quote-nm">服务电话：0315-6664000</blockquote>
                    <blockquote class="layui-elem-quote layui-quote-nm">地址：唐山路北区中环SOHO 1006</blockquote>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header"><i class="layui-icon layui-icon-login-wechat" style="font-size: 20px; color: #5FB878;"></i>项目微信公众号</div>
                <div class="layui-card-body ">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md5">
                            <img src="{$wxqrcode|default=''}" width="190" >
                        </div>
                        <div class="layui-col-md7">
                            <blockquote class="layui-elem-quote layui-quote-nm">
                                关注项目微信公众号及时查看了解最新项目进展<br>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header"><i class="layui-icon layui-icon-login-wechat" style="font-size: 20px; color: #5FB878;"></i>  绑定微信</div>
                <div class="layui-card-body ">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md5">
                            <img src="" width="190" id="qrcode">
                        </div>
                        <div class="layui-col-md7">
                            <blockquote class="layui-elem-quote layui-quote-nm">
                                首先关注项目微信公众号，再进行绑定操作<br>
                                用本人微信扫描上面二维码，就能及时接收项目各种进展信息<br>
                                如果原来有绑定的微信，将会被当前新的微信信息覆盖<br>
                                微信绑定后可以使用微信登录功能
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr>

</block>
<block name="script">
    <script>
        layui.use(['element', 'table', 'form', 'tree', 'util'], function () {
            var table = layui.table
                , element = layui.element
                , tree = layui.tree
                ,$=layui.$
                , util = layui.util
                , form = layui.form;
            qrcode()
            var myVar = setInterval(qrcode, 7000);

            function qrcode() {
                $.ajax({
                    url: '{:url("/info/qrcode")}',
                    type: 'POST',
                    dataType: 'json'
                })
                    .done(function (res) {
                        if (res.code == 0) {
                            $('#qrcode').attr('src', res.url);
                        } else {
                            window.location.href = res.url
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            offset: 'rt',
                            anim: 5
                        });
                    })
                    .always(function () {
                    });
            }
            var fdom = document.getElementById("projectbar");
            var fmyChart = echarts.init(fdom, 'light');
            var fdom2 = document.getElementById("projectradar");
            var fmyChart2 = echarts.init(fdom2, 'light');
            getfinish(0);
            function getfinish(project_id) {
                $.ajax({
                    url: "{:url('getprojectbar')}",
                    type: 'get',
                    dataType: 'json',
                    data: {
                        project_id: project_id
                    }
                })
                    .done(function (res) {
                        if (res.data == null) {
                            layer.msg('没有内容', {
                                time: 1500,
                                icon: 5
                            });
                        } else {
                            option = {
                                title: {
                                    text: res.data.project_name + '条形图',
                                    textStyle: {
                                        color: '#999',
                                        fontSize: 14,
                                    }
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                legend: {
                                    data: ['未完成', '完成'],
                                    right: 5,
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'value'
                                },
                                yAxis: {
                                    type: 'category',
                                    data: ['需求', '缺陷', '迭代']
                                },
                                series: [
                                    {
                                        name: '未完成',
                                        type: 'bar',
                                        stack: '总量',
                                        label: {
                                            normal: {
                                                show: true,
                                                position: 'insideRight'
                                            }
                                        },
                                        data: [res.data.m_1.no, res.data.m_2.no, res.data.m_3.no]
                                    },
                                    {
                                        name: '完成',
                                        type: 'bar',
                                        stack: '总量',
                                        label: {
                                            normal: {
                                                show: true,
                                                position: 'insideRight'
                                            }
                                        },
                                        data: [res.data.m_1.yes, res.data.m_2.yes, res.data.m_3.yes]
                                    }
                                ]
                            };
                            console.log(res.data);
                            fmyChart.setOption(option, true);

                            option2 = {
                                title: {
                                    text: res.data.project_name + '雷达图',
                                    textStyle: {
                                        color: '#999',
                                        fontSize: 14,
                                    }
                                },
                                tooltip: {},
                                legend: {
                                    data: ['应完成', '实际完成'],
                                    right: 5
                                },
                                radar: {
                                    // shape: 'circle',
                                    name: {
                                        textStyle: {
                                            color: '#fff',
                                            backgroundColor: '#999',
                                            borderRadius: 3,
                                            padding: [3, 5]
                                        }
                                    },
                                    center: ['50%', '65%'],
                                    indicator: [
                                        {name: '需求', max: 100},
                                        {name: '缺陷', max: 100},
                                        {name: '迭代', max: 100},
                                    ]
                                },
                                series: [{
                                    type: 'radar',
                                    // areaStyle: {normal: {}},
                                    data: [
                                        {
                                            value: [100, 100, 100],
                                            name: '应完成'
                                        },
                                        {
                                            value: [res.data.m_1.p, res.data.m_2.p, res.data.m_3.p],
                                            name: '实际完成'
                                        }
                                    ]
                                }]
                            };
                            fmyChart2.setOption(option2, true);

                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });
            }

            function treecategory() {
                $.ajax({
                    url: "{:url('treeproject')}",
                    type: 'get',
                    dataType: 'json',

                })
                    .done(function (res) {
                        if (res.data == null) {
                            layer.msg('没有内容', {
                                time: 1500,
                                icon: 5
                            });
                        } else {
                            tree.render({
                                elem: '#treeproject'  //绑定元素
                                , id: 'treeproject'
                                , data: res.data
                                , click: function (obj) {
                                    console.log(obj.data)
                                    getfinish(obj.data.id);
                                    return false;
                                }
                            });
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });

            }
            treecategory(0);
        });
    </script>
</block>